<template>
  <div>
    <div class="tabBox-wrap">
      <div class="content-wrap">
        <div class="article-title">
          <p>各单位在建工程转固率</p>
          <span></span>
        </div>
        <div style="margin-bottom: 15px;">
          <el-select size="mini" v-model="tValue" @change="handle_hundred">
            <el-option v-for="(it, i) in typeSelect" :key="i" :label="it.indexName" :value="it.indexCode"></el-option>
          </el-select>
        </div>
        <div id="barLine">
          <BarLine :barData="tableData" :id="1" v-loading="showTableLoading1"></BarLine>
        </div>
        <div class="article-title">
          <p>在建工程分单位</p>
          <span>单位：万元</span>
        </div>

        <div class="tableBox">
          <el-table :data="tableData" stripe size="mini" class="tableTh28" v-loading="showTableLoading1" max-height="400">
            <el-table-column prop="jsdwAh" label="地市"></el-table-column>
            <el-table-column prop="zjgcncs" label="在建工程年初数" width="180"></el-table-column>
            <el-table-column prop="yearIncrease" label="本年累计资本性支出"></el-table-column>
            <el-table-column prop="bnzge" label="本年转固金额"></el-table-column>
            <el-table-column prop="zgPer" label="转固率">
              <template slot-scope="{row}">
                <span>{{row.zgPer}}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div class="tabBox-wrap">
      <div class="content-wrap">
        <div class="article-title">
          <p>各单位在建工程转固率</p>
          <span></span>
        </div>
        <div id="barLine">
          <BarLine :barData="tableData2" :id="2" v-loading="showTableLoading2"></BarLine>
        </div>
        <div class="article-title clear">
          <div>
            <el-select v-model="selectvalue" placeholder="请选择" size="mini" @change="changSelect">
              <el-option v-for="(item,index) in selectoptions" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </div>
          <span>单位：万元</span>
        </div>

        <div class="tableBox">
          <el-table :data="tableData2" stripe size="mini" class="tableTh28" height="400" v-loading="showTableLoading2">
            <el-table-column prop="yjzyK" label="分类网" width="180"></el-table-column>
            <el-table-column prop="zjgcncs" label="在建工程年初数" width="180"></el-table-column>
            <el-table-column prop="yearIncrease" label="本年累计资本性支出"></el-table-column>
            <el-table-column prop="bnzge" label="本年转固金额"></el-table-column>
            <el-table-column prop="zgPer" label="转固率">
              <template slot-scope="{row}">
                <span>{{row.zgPer}}%</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BarLine from "./barLine2";
import { $budgetAPI } from "@/api/";
import { getSessionStorage } from "@/common/js/storage";
export default {
  components: {
    BarLine,
  },
  data() {
    return {
      selectoptions: [],
      selectvalue: undefined,
      showTableLoading1: true,
      showTableLoading2: true,
      tableData: [],
      tableData2: [],
      typeSelect: [],
      tValue: "HR000",
      areaId: JSON.parse(getSessionStorage("accountInfo")).areaId,
    };
  },
  created() {
    this.init();
  },
  methods: {
    getTypeSelect() {
      return new Promise((resolve, reject) => {
        $budgetAPI.getKanBanHundredYuanList(
          {
            acctYear: this.MaxacctMonth.substr(0, 4),
          },
          (res) => {
            if (res && res.code == 0) {
              resolve(
                [{ indexCode: "HR000", indexName: "全部" }].concat(res.content)
              );
            } else {
              reject([]);
            }
          }
        );
      });
    },
    handle_hundred(val) {
      this.tValue = val;
      this.getKanBanBuilderDwDataList();
    },
    init() {
      this.getKanBanAHList();
      this.getKanBanBuilderDwDataList();
    },
    async getKanBanAHList() {
      let { AHList } = await this.fetch($budgetAPI.getKanBanAHList);

      var areaId = this.areaId;
      let { MaxacctMonth } = await this.fetch(
        $budgetAPI.getKanBanYuanMaxAcctMonth,
        {
          areaId,
        }
      );
      this.MaxacctMonth = MaxacctMonth;
      this.typeSelect = await this.getTypeSelect();

      this.selectoptions = AHList;
      this.selectvalue = AHList[0];

      this.getKanBanBuilderYjzyDataList();
    },
    async getKanBanBuilderDwDataList() {
      try {
        this.showTableLoading1 = true;
        let { dataList } = await this.fetch(
          $budgetAPI.getKanBanBuilderDwDataList,
          {
            indexCode: this.tValue,
          }
        );
        this.tableData = dataList;
        // console.log(dataList);
      } catch (error) {
        console.log(error);
      } finally {
        this.showTableLoading1 = false;
      }
    },
    async getKanBanBuilderYjzyDataList() {
      try {
        this.showTableLoading2 = true;
        let { dataList } = await this.fetch(
          $budgetAPI.getKanBanBuilderYjzyDataList,
          {
            jsdwAh: this.selectvalue,
          }
        );
        this.tableData2 = dataList;
      } catch (error) {
        console.log(error);
      } finally {
        this.showTableLoading2 = false;
      }
    },
    changSelect(v) {
      this.selectvalue = v;
      this.getKanBanBuilderYjzyDataList();
    },
    fetch(action, params) {
      return new Promise((resolve, reject) => {
        action(
          { ...params },
          (res) => {
            if (res.code === 0) {
              resolve(res.content);
            } else {
              reject({});
            }
          },
          (err) => {}
        );
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.tabBox-wrap {
  padding: 10px 0 15px;
  width: inherit;
  //   height: 500px;
  //   background: pink;

  .content-wrap {
    width: 100%;
    // height: 500px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0px 15px 30px -10px rgba(0, 0, 0, 0.1);
    padding: 10px 20px 20px 20px;
    box-sizing: border-box;
  }
  .pro-content-wrap {
    //    width: 100%;
    display: flex;
    justify-content: space-between;

    div {
      flex: 1;
    }
    > :not(:last-child) {
      margin-right: 20px;
    }
    .left-box {
      .select-box {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        > span {
          font-size: 14px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.4);
        }
      }
    }
  }
}

.article-title {
  font-size: 14px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  position: relative;
  span {
    color: rgba(0, 0, 0, 0.4);
  }
  &::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    height: calc(100% - 15px);
    width: 5px;
    transform: translate(0, -50%);
    background-color: #0086ff;
  }
}
.clear {
  &::before {
    content: none;
  }
}
#barLine {
  height: 400px;
  //   width: 100%;
  //   background: red;
}
</style>